<template>
	<view class="order-pages" :style="{background:pageColor}">
		<scroll-view scroll-y class="scroll" :style="{ height: `calc(100vh - ${headerHeight}px)` }"
			:scroll-top="scrollTop" :scroll-into-view="scrollIntoView" scroll-with-animation @scroll="onScroll">
			<view class="warp">
				<view class="content-box">
					<view class="content-box-title">工作者注册</view>
					<view class="flex">
						<view class="flex-left">
							<!-- <view class="photo-img">
		                <view class="photo-img-text">照片</view>
		              </view> -->
							<image :src="detail.work_img" mode="aspectFill" class="ti-box-bg abs"></image>
						</view>
						<view class="flex-right">
							<view class="form-item disflex">
								<view class="form-item-title pl40">姓名：</view>
								<view>{{ detail.coach_name }}</view>
							</view>
							<view class="form-item disflex">
								<view class="form-item-title pl40">性别：</view>
								<view>{{ detail.sex === 1 ? '男' : '女' }}</view>
							</view>
							<view class="form-item disflex">
								<view class="form-item-title pl40">出生日期：</view>
								<view v-if="detail.birthday">{{ $util.formatTime(detail.birthday*1000,'YY.M.D') }}</view>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-title pl62">主要特长技能：</view>
						<textarea v-model="detail.text" class="textarea" :disabled="true" />
					</view>
					<view class="form-item">
						<view class="form-item-title pl62">技能证书：</view>
						<view class="skill-box">
							<view class="skill-box-content" v-if="detail.license">
								<image :src="item" mode="aspectFill" class="ti-box-bg abs" v-for="(item,index) in detail.license" :key="index"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-title pl62">技能展示：</view>
						<view class="skill-box">
							<view class="skill-box-content" v-if="detail.license">
								<image :src="item" mode="aspectFill" class="ti-box-bg abs" v-for="(item,index) in detail.self_img" :key="index"></image>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="form-item-title pl62">工作展示：</view>
						<view class="skill-box">
							<video id="myVideo" :src="detail.self_video" @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
						</view>
					</view>
					<view class="btn-box">
						<view :class="detail.is_collect ? 'order-btn-no' : 'order-btn'" @click="toCollect">{{ detail.is_collect ? '取消收藏' : '收藏工作者'}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import $util from "@/utils/index.js"
	export default {
		components: {

		},
		data() {
			return {
				headerHeight: 0,
				form: {},
				detail: {},
				options: {},
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			this.options = options
			this.initIndex()
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			uni.setNavigationBarTitle({
				title: this.$t('action.attendantName') + '详情'
			})
		},
		methods: {
			onScroll(event) {},
			imgUpload(e) {
				let {
					imagelist,
					imgtype
				} = e;
				this.form[imgtype] = imagelist;
			},
			async initIndex() {
				await this.getDetail()
			},
			async getDetail() {
				let {
					id
				} = this.options
				let data = await this.$api.service.coachInfo({
					id
				})
				let {
					industrytype
				} = this.configInfo.plugAuth
				if (data.industry_data) {
					if (industrytype == 1) {
						data.industry_data.business_license = 0
						data.industry_data.health_certificate = 0
					}
					if (industrytype == 1 || data.industry_data.type == 1) {
						data.industry_data.age_sex = 0
					}
					if (industrytype == 2 || data.industry_data.type == 2) {
						data.industry_data.age_sex = 1
					}
				}
				data.banner = data.video ? [{
					jump_type: 'video',
					img: data.work_img,
					jump_url: data.video
				}] : [{
					img: data.work_img
				}]
				data.arrBanner = data.banner.concat(data.self_img)
				let have_show_text = data.text.length > 42
				data.have_show_text = have_show_text
				data.showText = !have_show_text
				data.industry_show = 0
				data.certificate_show = 0
				data.star = (data.star * 1).toFixed(1)
				Array.from(['employment_years', 'height', 'weight', 'constellation']).map(item => {
					if (data.industry_data[item]) {
						data.industry_show = 1
					}
				})
				Array.from(['business_license', 'health_certificate', 'massage_certificate', 'id_card',
					'avatar_verification'
				]).map(item => {
					if (data.industry_data[item]) {
						data.certificate_show = 1
					}
				}) 
				let {
					store_id = 0,
						store_name = ''
				} = data
				data.store = store_id && store_name ? [{
					id: store_id,
					title: store_name
				}] : data.store || []
				this.detail = data
				console.log(this.detail, 'this.detail')
			},
			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			async toCollect() {
				let {
					id,
					is_collect,
					collect_num
				} = this.detail
				let methodModel = is_collect ?
					'delCollect' : 'addCollect'
				await this.$api.mine[methodModel]({
					coach_id: id
				})
				this.$util.showToast({
					title: is_collect ? '取消成功' : '收藏成功'
				})
				this.getDetail()
			}
		}
	}
</script>


<style lang="scss">
	.warp {
		background-color: #fff;
		overflow: hidden;

		.content-box {
			width: 750rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			overflow: hidden;
			margin-top: -20rpx;
			position: relative;

			.content-box-title {
				height: 120rpx;
				line-height: 140rpx;
				padding: 0 50rpx;
				border-bottom: 1rpx solid #D5D5D5;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 500;
				font-size: 40rpx;
				color: #000000;
			}

			.flex {
				display: flex;
				// border-top: 1rpx solid #D5D5D5;
			}

			.flex-left {
				width: 224rpx;
				height: 260rpx;
				border-radius: 0px 0px 0px 0px;
				border-right: 1rpx solid #D5D5D5;
				border-bottom: 1rpx solid #D5D5D5;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 200rpx !important;
					height: 240rpx !important;
				}
			}

			.flex-right {
				width: 524rpx;
			}

			.photo-img {
				width: 99rpx;
				height: 150rpx;
				border: 1rpx solid #A3A3A3;
				margin: 14rpx auto;
				position: relative;

				.photo-img-text {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 16rpx;
					color: #9E9E9E;
					text-align: center;
					height: 30rpx;
					line-height: 30rpx;
					margin: 60rpx auto;
				}
			}

			.form-item {
				width: 100%;
				border-bottom: 1rpx solid #D5D5D5;
				padding: 22rpx 0;

				.form-item-title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
				}

				.uni-input {
					padding: 0 10rpx;
				}

				.textarea {
					width: 625rpx;
					height: 180rpx;
					padding: 20rpx 62rpx;
				}

				.id-card {
					width: 300rpx;
					height: 200rpx;
					border: 1px solid #A3A3A3;
					display: flex;
					align-items: center;
					justify-content: center;

					.id-card-text {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 20rpx;
						color: #AEAEAE;
					}
				}

				.skill-box {
					width: 710rpx;
					min-height: 220rpx;
					border-radius: 0px 0px 0px 0px;
					// border: 1px solid #A3A3A3;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 20rpx auto;
					padding: 10rpx 0;
					.skill-box-content{
						width: 710rpx;
						display: flex;
						align-items: center;
						image{
							width: 180rpx !important;
							height: 200rpx !important;
						}
					}
					.skill-box-text {
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 20rpx;
						color: #AEAEAE;
					} 
				}

				.checkbox-text {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 24rpx;
					color: #9A9A9A;
				}
			}

			.pl40 {
				padding-left: 40rpx;
			}

			.pl62 {
				padding-left: 62rpx;
			}

			.pr62 {
				padding-right: 62rpx;
			}

			.disflex {
				display: flex;
				align-items: center;
			}

			.btn-box {
				padding: 60rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;

				.order-btn {
					width: 300rpx;
					height: 64rpx;
					background: #6EC2B0;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 64rpx;
				}
				.order-btn-no {
					width: 300rpx;
					height: 64rpx;
					// background: #6EC2B0;
					border: 2rpx solid #000;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 400;
					font-size: 30rpx;
					color: #000;
					text-align: center;
					line-height: 64rpx;
				}
			}
		}
	}
</style>